
{include file="layout/header"}
<div class="fly-panel fly-column">
    <div class="layui-container">
        <ul class="layui-clear">
            <li class="layui-hide-xs layui-this"><a href="{:url('forum',['type'=>'all'])}">首页</a></li>
                        <li class=""><a href="{:url('forum',['type'=>'bug'])}">提交BUG/建议</a></li>
                        <li class=""><a href="{:url('forum',['type'=>'update'])}">【更新公告】</a></li>
                    </ul>

        <div class="fly-column-right layui-hide-xs">
            UniTp交流一群：1040026368
            <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=HD1zkSV5xs25ALHcNzZHQFkPrVLTdNug&amp;jump_from=webapi">
                <img border="0" style="width: 40px;" src="/static/home/images/qq.png" alt="UniTp交流一群" title="UniTp交流一群">
            </a>
            <a href="{:url('Forum/forum_add')}" class="layui-btn" style="margin-left:20px;border-radius: 4px;background-color: #5FB878!important;height: 36px;line-height: 36px;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);">发表新帖</a>
        </div>
        <div class="layui-hide-sm layui-show-xs-block" style="margin-top: -10px; padding-bottom: 10px; text-align: center;">
            <a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=HD1zkSV5xs25ALHcNzZHQFkPrVLTdNug&amp;jump_from=webapi"><img border="0" src="../pub.idqqimg.com/wpa/images/group.png" alt="LayTp交流一群" title="LayTp交流一群"></a>
            <a href="{:url('Forum/forum_add')}" class="layui-btn" style="border-radius: 4px;background-color: #5FB878!important;height: 36px;line-height: 36px;box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);">发表新帖</a>
        </div>
    </div>
</div>
<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="fly-panel" style="margin-bottom: 0;">
                <div class="fly-panel-title fly-filter" id="forumListBegin">
                    <a>帖子列表</a>
                </div>
                <ul class="fly-list forumList">
                    <!-- 帖子列表将通过AJAX加载 -->
                </ul>
                <div id="page" style="text-align:center"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="forumTpl">
    {{# for(let k in d){ }}
    <li>
        <a href="/user/{{d[k].user.nickname}}.html" class="fly-avatar">
            <img src="{{d[k].user.head_pic}}" alt="{{d[k].user.nickname}}">
        </a>
        <h2>
            <a class="layui-badge">{{d[k].type === 'bug' ? 'BUG反馈/建议' : '更新内容'}}</a>
            <a href="/home/Forum/forum_detail/id/{{d[k].id}}">{{d[k].title}}</a>
        </h2>
        <div class="fly-list-info">
            <a href="/user/{{d[k].user.nickname}}.html" link>
                <cite>{{d[k].user.nickname}}</cite>
            </a>
            <span>{{d[k].create_time}}</span>
            <span class="fly-list-nums">
                <i class="layui-icon layui-icon-reply-fill" title="回答"></i>{{d[k].reply_count}}
            </span>
        </div>
        <div class="fly-list-badge"></div>
    </li>
    {{# } }}
</script>
<script>
    layui.use(['facade', 'laypage', 'laytpl'], function() {
        var $ = layui.$;
        var laypage = layui.laypage;
        var laytpl = layui.laytpl;
        var facade = layui.facade;
        var type = '{$type}';

        // 首次加载数据
        loadForumList(1);

        // 加载帖子列表函数
        function loadForumList(page) {
            $.ajax({
                url: "{:url('home/Forum/forum')}",
                type: 'GET',
                dataType: 'json',
                data: {page: page, limit: 10, type: type}
                , success: function (res) {
                    if (res.status ==1) {
                        // 渲染列表
                        if (res.data.data.length > 0) {
                            laytpl($('#forumTpl').html()).render(res.data.data, function (html) {
                                $(".forumList").html(html);
                            });
                        } else {
                            $(".forumList").html('<li class="fly-none">暂无帖子</li>');
                        }

                        // 渲染分页
                        laypage.render({
                            elem: 'page'
                            , count: res.data.total
                            , curr: page
                            , jump: function (obj, first) {
                                // 首次不执行
                                if (!first) {
                                    loadForumList(obj.curr);
                                    // 滚动到列表顶部
                                    var $div = $('#forumListBegin');
                                    var top = $div.offset().top || 0;
                                    $('html,body').animate({
                                        'scrollTop': top - 100
                                    }, 500);
                                }
                            }
                        });
                    }
                }
            });
        }
    })
</script>
{include file="layout/footer"}
</body>
</html>